<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Travel Sharer</title>
    <link rel="stylesheet" href="css/font-family.css">
    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/comment.js"></script>
    <script src="js/swiper.js"></script>
</head>
<script>
    $('.nav-detail li a').removeClass('nav-action');
</script>
<body>
    <!-- 导航 start -->
    <div class="nav-top">
        <div class="nav-login">
            <div class="nav-head">
                <a href="login.html">
                    <img class="login-img" src="img/head.png" alt="">
                    <span>Log In/ Sign Up</span>
                </a>
            </div>
            <div class="nav-link">
                <a href="https://www.facebook.com/">
                    <img src="img/fb.png" alt="">
                </a>
                <a href="https://www.instagram.com/">
                    <img src="img/ins.png" alt="">
                </a>
            </div>
        </div>
        <nav class="nav-list">
            <ul class="nav-detail">
                <li><a href="#" class="nav-action">Hmoe</a></li>
                <li><a href="travelNote.html">Travel Note</a></li>
                <li>
                    <a href="findTraveller.html">Find Traveller</a>
                    <ul class="nav-second-nav">
                        <li><a href="discover.html">pitcure</a></li>
                        <li><a href="discover.html">article</a></li>
                    </ul>
                </li>
                <li><a href="discover.html">Discover</a></li>
                <li>
                    <a href="myPost.html">My Post</a>
                    <ul class="nav-second-nav">
                        <li><a href="discover.html">pitcure</a></li>
                        <li><a href="discover.html">article</a></li>
                    </ul>
                </li>
                <li><a href="members.html">Members</a></li>
                <li><a href="myCollection.html">My Collection</a></li>
                <li>
                    <a href="about.html">About</a>
                    <ul class="nav-second-nav">
                        <li><a href="discover.html">pitcure</a></li>
                        <li><a href="discover.html">article</a></li>
                    </ul>
                </li>
            </ul>
            <div class="nav-search">
                <img src="img/search.png" alt="">
                <input type="text" placeholder="Search Site">
            </div>
        </nav>
    </div>
    <!-- 导航 end -->
    <!-- 中部 start -->
    <div class="center-box">
        <!-- 轮播 start -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="img/bg1.png" class="swiper-img"></div>
                <div class="swiper-slide"><img src="img/bg2.png" class="swiper-img"></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination swiper-pagination-white"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev swiper-button-white"></div>
            <div class="swiper-button-next swiper-button-white"></div>
        </div>
        <div class="swiper-center-text">
            <div class="center-text-font-1">Your</div>
            <div class="center-text-font-2">TRAVEL</div>
            <div class="center-text-font-3">goes here</div>
        </div>
        <!-- 轮播 end -->
        
        <!-- 内容 start -->
        <section class="home-content">
            <div class="home-title">
                <div class="title-line"></div>
                <div class="title-block"> 
                    <span>Discover more possibilities for your trip.</span>
                </div>
            </div>
            <div class="content-block">
                <div class="block-left">
                    <div class="block-bg">
                        <img src="img/block.png" class="block-img">
                        <a href="#" class="block-link"><span>Share Experience</span></a>
                    </div>
                    <div class="img-skrew skrew-tl"></div>
                    <div class="img-skrew skrew-tr"></div>
                    <div class="img-skrew skrew-br"></div>
                    <div class="img-skrew skrew-bl"></div>
                </div>
                <div class="block-right">
                    <div class="block-bg">
                        <img src="img/block2.png" class="block-img">
                        <a href="findTraveller.html" class="block-link"><span>Find Traveller</span></a>
                    </div>
                    <div class="img-skrew skrew-tl"></div>
                    <div class="img-skrew skrew-tr"></div>
                    <div class="img-skrew skrew-br"></div>
                    <div class="img-skrew skrew-bl"></div>
                </div>
            </div>
        </section>
        <section class="content-title">
            <div class="title-type">
                Discover in
                <span style="border-right: 2px solid #CDBCC7;width: 2px;"></span>
            </div>
            <div class="title-type-div title-type-1">
                Destination
            </div>
            <div class="title-type-div title-type-2">
                Eat
            </div>
            <div class="title-type-div title-type-3">
                Hotel
            </div>
        </section>
        <div class="content-detail">
            <ul>
                <li class="content-detail-li">
                    <div class="content-div">
                        <div class="div-img">
                            <a href="">
                                <img src="img/detail1.png" alt="">
                            </a>
                        </div>
                        <div class="div-data">
                            <span>January 14, 2017</span>
                        </div>
                        <div class="div-title">
                            <span>XXXX</span>
                        </div>
                        <div class="div-content">
                            <span>XXXXXXXXXXXXXXXXXXXxxXXXXXXXXxxXXXXXXXXxxXXXXXXXXxxXXXXXXXXxxXXXXXXXXxxXXXXXXXXxxxxxxxxxxxxxxxxxxxxxxxxXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
                        </div>
                        <div class="div-line"></div>
                        <div class="div-author">
                            <div class="author-img">
                                <img src="img/detailH.png" alt="">
                            </div>
                            <div class="author-name">
                                <span>xxxxx</span>
                            </div>
                            <div class="author-mail">
                                <a href="xxx@xxxxx.com">
                                    <span>xxx@xxxxx.com</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="content-detail-li">
                    <div class="content-div">
                        <div class="div-img">
                            <a href="">
                                <img src="img/detail2.png" alt="">
                            </a>
                        </div>
                        <div class="div-data">
                            <span>January 14, 2017</span>
                        </div>
                        <div class="div-title">
                            <span>XXXX</span>
                        </div>
                        <div class="div-content">
                            <span>XXXXXXXXXXXXXXXXXXXxxXXXXXXXXxxXXXXXXXXxxXXXXXXXXxxXXXXXXXXxxXXXXXXXXxxXXXXXXXXxxxxxxxxxxxxxxxxxxxxxxxxXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
                        </div>
                        <div class="div-line"></div>
                        <div class="div-author">
                            <div class="author-img">
                                <img src="img/detailH.png" alt="">
                            </div>
                            <div class="author-name">
                                <span>xxxxx</span>
                            </div>
                            <div class="author-mail">
                                <a href="xxx@xxxxx.com">
                                    <span>xxx@xxxxx.com</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="content-detail-li">
                    <div class="content-div">
                        <div class="div-img">
                            <a href="">
                                <img src="img/detail2.png" alt="">
                            </a>
                        </div>
                        <div class="div-data">
                            <span>January 14, 2017</span>
                        </div>
                        <div class="div-title">
                            <span>XXXX</span>
                        </div>
                        <div class="div-content">
                            <span>XXXXXXXXXXXXXXXXXXXxxXXXXXXXXxxXXXXXXXXxxXXXXXXXXxxXXXXXXXXxxXXXXXXXXxxXXXXXXXXxxxxxxxxxxxxxxxxxxxxxxxxXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
                        </div>
                        <div class="div-line"></div>
                        <div class="div-author">
                            <div class="author-img">
                                <img src="img/detailH.png" alt="">
                            </div>
                            <div class="author-name">
                                <span>xxxxx</span>
                            </div>
                            <div class="author-mail">
                                <a href="xxx@xxxxx.com">
                                    <span>xxx@xxxxx.com</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 内容 end -->
    </div>
    <!-- 中部 end -->
    <!-- 底部 start -->
    <footer class="bottom-box">
        <div class="bottom-bg">
            <img src="img/bottomBg.png" alt="">
        </div>
        <div class="bottom-content">
            <div class="content-left">
                <!-- <img src="img/bottomImg.png" alt=""> -->
            </div>
            <div class="content-right">
                <div class="about-us">ABOUT US</div>
                <div class="us-info">
                    <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
                    
                    <span class="us-info-add">​XXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
                </div>
                <div class="us-more">
                    <a href="about.html" class="us-more-a">
                        <div>
                            READ MORE
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="bottom-copy">
            <div class="copy-css">© 2019 by Travel Sharer.</div>
        </div>
    </footer>
    <!-- 底部 end -->
<script>        
    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
        
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
    })        
</script>
</body>
</body>
</html>
